<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label {
            display: inline-block;
            width: 140px;
        }

        button {
            background-color: #f00;
        }

        button:disabled {
            background-color: rgba(255, 0, 0, .3);
        }
    </style>
</head>

<body>

    <label for="">用户名：</label>
    <input type="text" name="" id="user">
    <span id="user_span"></span>
    <br> <br>
    <label for="">昵称(2-4位中文)：</label>
    <input type="text" name="" id="nickname">
    <span id="nickname_span"></span>
    <br> <br>
    <label for="">密码：</label>
    <input type="text" name="" id="pwd">
    <span id="pwd_span"></span>
    <br> <br>
    <label for="">邮箱：</label>
    <input type="text" name="" id="email">
    <span id="imail_span"></span>
    <br> <br>
    <label for="">验证？</label>
    <br> <br>
    <button disabled>注册</button>


    <script>

        // 正则验证
        // es6语法
        //   let const
        //   解构
        //   展开运算符
        //   箭头函数
        //   函数参数默认值

        // 预习
        //   cookie
        //   ajax

    </script>

</body>

</html>